<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Boolean, required: true },
  },
  emits: {
    "update:modelValue": (value: boolean) => typeof value === "boolean",
  },
  setup(props, ctx) {
    const btnClick = () => {
      ctx.emit("update:modelValue", !props.modelValue);
    };
    return { btnClick };
  },
});
</script>

<template>
  <view class="expand-btn" @click="btnClick">
    <view class="expand-btn-text">{{ modelValue ? "收起" : "展开更多" }}</view>
    <image
      class="expand-btn-icon"
      :style="{ transform: `rotate(${modelValue ? -180 : 0}deg)` }"
      src="@/package/guider/static/store-search-expand.png"
    />
  </view>
</template>

<style lang="scss">
.expand-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  .expand-btn-text {
    margin-right: 10rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }

  .expand-btn-icon {
    width: 20rpx;
    height: 20rpx;
  }
}
</style>